<template>
  <div class="flex items-center title">
    <!-- <img class="icon" :src="getImageUrl(icon || 'person')" />  -->
    <div class="flex-1">
      <Icon :icon="icon || 'fluent-mdl2:work-item-bar-solid'" class="icon -ml-1" />
      <span>{{ text || '' }}</span>
    </div>
    <div class="extra">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { Icon } from '/@/components/Icon';

  export default defineComponent({
    name: 'FormTitle',
    components: { Icon },
    props: ['text', 'icon', 'subText'],
    setup() {
      // function getImageUrl(path = 'revenue') {
      //   return new URL(`../../../../assets/images/paperInstall/${path}.png`, import.meta.url).href;
      // }
      // return { getImageUrl };
    },
  });
</script>
<style lang="less" scoped>
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .icon {
    color: @primary-color;
    @media (max-width: @screen-xl) {
      width: 16px;
    }
  }

  .subText {
    font-size: 14px;
    font-weight: 400;
  }
</style>
